<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
    <script src="/layuiadmin/layui/layui.js"></script>
    <style>
        #barragelist>tr:hover{
            background-color: #fff;
        }
    </style>
</head>
<body style="background-color:#fff">

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" class="layui-form layui-form-pane" lay-filter="layui-form-pane" id="sbumitForm">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">等级序号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="id"  placeholder="等级序号" lay-verify="required" autocomplete="off" class="layui-input" value="{$model->id}" readonly="true"/>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">等级名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"  placeholder="等级名称" lay-verify="required" autocomplete="off" class="layui-input" value="{$model->name}"/>
                    </div>
                </div>
            </div>


            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">开通价格：</label>
                    <div class="layui-input-block">
                        <input type="text" name="price"  placeholder="开通价格(宝石)" title="开通价格(宝石)"  autocomplete="off" class="layui-input" value="{$model->price}" onkeyup="input_num(this)" />
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">续费价格：</label>
                    <div class="layui-input-block">
                        <input type="text" name="renew_price"  placeholder="续费价格(宝石)" title="续费价格(宝石)" autocomplete="off" class="layui-input" value="{$model->renew_price}" onkeyup="input_num(this)" />
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">坐骑名称：</label>
                    <div class="layui-input-block">
                        <select name="props_id" lay-verify="required">
                            {foreach $props as $v}
                            <option value="{$v.id}" <?php if ($v['id'] == $model->props_id) {echo 'selected';}?> >{$v.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">炫彩弹幕</label>
                <div class="layui-input-block">
                    <table class="layui-table layui-form" style="table-layout:fixed;width: 100%">
                        <thead>
                        <tr>
                            <th style="width:10%;text-align:center;font-size: 12px" >序号</th>
                            <th style="text-align:center;width:44%;font-size: 12px" >弹幕名称</th>
                            <th style="text-align:center;width:40%;font-size: 12px">数量</th>
                            <th style="text-align:center;width:6%;font-size: 12px;border-color:#fff;background:#fff">
                                <a href="javascript:;" class="barrage" onclick="barrage()">
                                    <i class="layui-icon layui-icon-add-circle" style="font-size: 26px"></i>
                                </a>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="barragelist">
                            <?php foreach($model->barrage as $key => $list) {?>
                            <tr>
                                <td style="text-align:center;font-size: 12px" class="xuhao"><?php echo $key + 1;?></td>
                                <td style="text-align:center;font-size: 12px" class="barrage_<?php echo $list['props_id'];?>"><?php echo $list['name'];?></td>
                                <td style="text-align:center;font-size: 12px"><?php echo $list['amount'];?></td>
                                <td style="text-align:center;border-color:#fff;background:#fff">
                                    <input type="hidden" name="barrage_id[]" value="<?php echo $list['props_id'];?>">
                                    <input type="hidden" name="barrage_nums[]" value="<?php echo $list['amount']?>">
                                    <a href="javascript:;" class="reduce" onclick="reduce(this)">
                                        <i class="layui-icon layui-icon-reduce-circle" style="font-size: 26px"></i>
                                    </a>
                                </td>
                            </tr>
                            <?php }?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">喇叭：</label>
                    <div class="layui-input-block">
                        <div class="layui-input-block" style="margin-left: 0px;width: 40%;float: left">
                            <select name="trumpet_id">
                                {foreach $trumpet as $v}
                                <option value="{$v.id}" <?php if ($v['id'] == $model->trumpet_id) {echo 'selected';}?> >{$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="layui-input-block" style="margin-left: 1%;width: 59%; float: left">
                            <input type="text" name="trumpet_num"  placeholder="喇叭数量" title="喇叭数量"  autocomplete="off" class="layui-input" value="<?php echo $model->trumpet_num; ?>" onkeyup="clearNoNum(this)" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg6">
                    <label class="layui-form-label">礼物折扣：</label>
                    <div class="layui-input-block">
                        <input type="text" name="gift_discount"  placeholder="礼物折扣" autocomplete="off" class="layui-input" value="{$model->gift_discount}" onkeyup="clearNoNum(this)" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 35px">
                <div class="layui-input-block">
                    <span class="layui-btn"  lay-submit="" lay-filter="submitForm"  style="width: 100%">确认修改</span>
                </div>
            </div>
            <div class="layui-layer layui-layer-dialog" id="select_barrage" type="dialog" times="2" showtime="0" contype="string" style="z-index: 19891016; width: 480px; height: 320px; top: 140px; left: 110px;display: none">
                <div class="layui-layer-title" >
                    <strong style="font-size: 14px">添加弹幕</strong>
                </div>
                <div id="" class="layui-layer-content" style="height: 190px;">
                    <div style="align-content: center; margin-top:10px">
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <div class="layui-col-lg6">
                                <label class="layui-form-label">选择弹幕：</label>
                                <div class="layui-input-block">
                                    <select name="add_barrage" id="add_barrage">
                                        {foreach $barrage as $v}
                                        <option value="{$v.id}">{$v.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <div class="layui-col-lg6">
                                <label class="layui-form-label">弹幕数量：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="barrage_num" id="barrage_num" placeholder="弹幕数量"  autocomplete="off" class="layui-input" value="1" onkeyup="clearNoNum(this)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="layui-layer-setwin">
                    <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" onclick="closel_barrage()"></a>
                </span>
                <div class="layui-layer-btn layui-layer-btn-">
                    <a class="layui-layer-btn0" onclick="submit_arrage()">确定</a>
                    <a class="layui-layer-btn1" onclick="closel_barrage()">取消</a>
                </div>
                <span class="layui-layer-resize"></span>
            </div>
        </form>
    </div>
</div>
<script>

    layui.use(['form'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;
        form.on('submit(submitForm)', function (obj) {
            layer.confirm('确认要修改吗？', {icon: 6}, function () {
                $.ajax({
                    type: "POST", //请求方式
                    url: '/admin/noble/level_edit?id={$model->id}', //请求地址
                    dataType: "json", //返回的数据类型
                    data: $("#sbumitForm").serialize(), //数据
                    //请求成功
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 2000}, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                window.parent.location.reload();
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 5000});
                        }
                    },
                    //请求失败
                    error: function (e) {
                        if (e.responseJSON.msg) {
                            layer.msg(e.responseJSON.msg, {icon: 2});
                        }
                    }
                });
            });
            return false;
        });
    });

    function clearNoNum(obj) {
        obj.value = obj.value.replace(/[^\d]/g, "");
        obj.value = obj.value.replace(/^\./g, "");
    }

    function input_num(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");
        obj.value = obj.value.replace(/^\./g,"");
        obj.value = obj.value.replace(/\.{2,}/g,".");
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');

        // if(obj.value.indexOf(".")> 0  && obj.value.indexOf("0")>2){
        //     obj.value= parseFloat(obj.value);
        // }
        // if(obj.value.indexOf(".")> 0  && obj.value.lastIndexOf("0")>2){
        //     obj.value= parseFloat(obj.value);
        // }
        // if (obj.value.indexOf(".") <= 0 && obj.value != "") {
        //     obj.value = parseFloat(obj.value);
        // }
    }


    function barrage() {
        $("#barrage_num").val(1);
        $("#select_barrage").show();
    }
    
    function closel_barrage() {
        $("#select_barrage").hide();
    }
    
    function submit_arrage() {
        $("#select_barrage").hide();
        var barrage_name  = $('#add_barrage option:selected').text();
        if (!barrage_name) {
            layer.msg('弹幕选择错误');
            return false;
        }

        var barrage = $('#add_barrage option:selected').val();

        if ($('td').hasClass('barrage_' + barrage)) {
            layer.msg('该弹幕已选,不能重复');
            return false;
        }

        if ($("#barragelist .xuhao").length >= 3 ) {
            layer.msg('对不起,最多只能选择三个弹幕');
            return false;
        }

        var barrage_num = $("#barrage_num").val();
        if (barrage_num <= 0) {
            layer.msg('弹幕数量不能小于0');
            return false;
        }

        var html = '<tr><td style="text-align:center;font-size: 12px" class="xuhao" ></td>';
        html += '<td style="text-align:center;font-size: 12px" class="barrage_' + barrage +'">' + barrage_name + "</td>";
        html += '<td style="text-align:center;font-size: 12px">' + barrage_num + "</td>";
        html += '<td style="text-align:center;border-color:#fff;background:#fff"><input type="hidden" name="barrage_id[]" value="' + barrage + '"><input type="hidden" name="barrage_nums[]" value="' + barrage_num + '">';
        html += '<a href="javascript:;" class="reduce" onclick="reduce(this)"><i class="layui-icon layui-icon-reduce-circle" style="font-size: 26px"></i></a></td></tr>';
        $("#barragelist").append(html);
        $("#barragelist .xuhao").each(function(index){
            $(this).text((index+1))
        });
    }

    function reduce(obj) {
        $(obj).parent().parent().remove();
        $("#barragelist .xuhao").each(function(index){
            $(this).text((index+1))
        });
    }
</script>
</body>

</html>
